<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增课程安排')" />
    <th:block th:include="include :: datetimepicker-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-arrange-add">
            <input type="hidden" name="clazzId" th:value="${clazzId}"/>
            <input type="hidden" name="day" th:value="${day}"/>
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">教室：</label>
                <div class="col-sm-8">
                    <select name="roomId" class="form-control m-b" required>
                        <option th:each="room:${rooms}" th:value="${room.roomId}" th:text="${room.roomCode}"></option>
                    </select>
                </div>
            </div>

            <div class="form-group">    
                <label class="col-sm-3 control-label">时间段：</label>
                <div class="col-sm-8">
                    <select name="timeSlot" class="form-control m-b" th:with="type=${@dict.getType('course_time_slot')}" required>
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">课程：</label>
                <div class="col-sm-7">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>拖拽下列课程到此区域（只可选择一门课程）</h5>
                        </div>

                        <div class="ibox-content">
                            <div class="row form-body form-horizontal m-t">
                                <div class="col-md-12 droppable sortable">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
        <div class="row">
            <ul class="sortable-list connectList agile-list">
                <ul th:each="course : ${courses}">
                    <div class="col-sm-2">
                        <div class="form-group draggable">
                            <div class="ibox">
                                <div class="ibox-title" th:value="${course.courseId}"
                                     th:text="${course.courseName}">
                                </div>
                                <div class="ibox-content" th:text="${course.teacherName}" style="color: #ff1a35">
                                </div>
                            </div>
                        </div>
                    </div>
                </ul>
            </ul>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <script th:src="@{/js/jquery-ui-1.10.4.min.js}"></script>
    <script th:src="@{/ajax/libs/beautifyhtml/beautifyhtml.js}"></script>
    <script type="text/javascript">
        var prefix = ctx + "mgr/arrange"
        $("#form-arrange-add").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                var $copy = $(".form-body").clone().appendTo(document.body);
                $copy.find(".tools, :hidden").remove();
                $.each(["draggable", "droppable", "sortable", "dropped", "ui-sortable", "ui-draggable", "ui-droppable", "form-body"],
                    function(i, c) {
                        $copy.find("." + c).removeClass(c).removeAttr("style")
                    });
                var courseName = $copy.find(".ibox-title").text();
                var courseSize = $copy.find(".ibox-title").length;
                $copy.remove();

                var url = prefix + "/add?courseName=" + courseName + "&courseSize=" + courseSize;
                $.operate.save(url, $('#form-arrange-add').serialize());
            }
        }
        $("input[name='courseDate']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });

        $(document).ready(function() {
            setup_draggable();
            $("#n-columns").on("change",
                function() {
                    var v = $(this).val();
                    if (v === "1") {
                        var $col = $(".form-body .col-md-12").toggle(true);
                        $(".form-body .col-md-6 .draggable").each(function(i, el) {
                            $(this).remove().appendTo($col)
                        });
                        $(".form-body .col-md-6").toggle(false)
                    } else {
                        var $col = $(".form-body .col-md-6").toggle(true);
                        $(".form-body .col-md-12 .draggable").each(function(i, el) {
                            $(this).remove().appendTo(i % 2 ? $col[1] : $col[0])
                        });
                        $(".form-body .col-md-12").toggle(false)
                    }
                });
        });
        var setup_draggable = function() {
            $(".draggable").draggable({
                appendTo: "body",
                helper: "clone"
            });
            $(".droppable").droppable({
                accept: ".draggable",
                helper: "clone",
                hoverClass: "droppable-active",
                drop: function(event, ui) {
                    $(".empty-form").remove();
                    var $orig = $(ui.draggable);
                    if (!$(ui.draggable).hasClass("dropped")) {
                        var $el = $orig.clone().addClass("dropped").css({
                            "position": "static",
                            "left": null,
                            "right": null
                        }).appendTo(this);
                        var id = $orig.find(":input").attr("id");
                        if (id) {
                            id = id.split("-").slice(0, -1).join("-") + "-" + (parseInt(id.split("-").slice( - 1)[0]) + 1);
                            $orig.find(":input").attr("id", id);
                            $orig.find("label").attr("for", id)
                        }
                        $('<p class="tools col-sm-12 col-sm-offset-3">						<a class="remove-link">移除</a></p>').appendTo($el)
                    } else {
                        if ($(this)[0] != $orig.parent()[0]) {
                            var $el = $orig.clone().css({
                                "position": "static",
                                "left": null,
                                "right": null
                            }).appendTo(this);
                            $orig.remove()
                        }
                    }
                }
            }).sortable()
        };
        var get_modal = function(content) {
            var modal = $('<div class="modal" style="overflow: auto;" tabindex="-1">	<div class="modal-dialog"><div class="modal-content"><div class="modal-header"><a type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</a><h4 class="modal-title">编辑HTML</h4></div><div class="modal-body ui-front">	<textarea class="form-control textarea-show-src"  style="min-height: 200px; margin-bottom: 10px;font-family: Monaco, Fixed"></textarea><button class="btn btn-success">更新HTML</button></div></div></div></div>').appendTo(document.body);
            var doms = document.getElementsByClassName("textarea-show-src");
            for (var i = 0; i < doms.length; i++) {
                doms.item(i).innerHTML = content;
            }
            return modal
        };
        $(document).on("click", ".remove-link",
            function(ev) {
                $(this).parent().parent().remove()
            });
    </script>
</body>
<style>
    .droppable-active{background-color:#ffe!important}.tools a{cursor:pointer;font-size:80%}.form-body .col-md-6,.form-body .col-md-12{min-height:40px;width: 60%;}.draggable{cursor:move}
</style>
</html>